<template>
	<view class="search-box">
		<view class="search-box-l" :class="{ 'cancle': !cancle }">
			<view class="box-l-search" @click="searchHandle">
				<view class="box-search-icon"></view>
				<view v-if="!cancle">搜索</view>
			</view>
			<view class="box-l-input" v-if="cancle">
				<input v-model="value" />
			</view>
			<view class="box-l-close" @click="searchClose" v-if="cancle"></view>	
		</view>
		<view class="search-box-r" v-if="cancle" @click="cancleHandle(false)">取消</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
const value = ref('');
const cancle = ref(true);
const cancleHandle = (status) => {
	cancle.value = status;
}

const searchHandle = () => {
	if(!cancle.value) {
		cancle.value = true;
	}else {
		console.log("搜索内容")
	}
}

const searchClose = () => {
	value.value = '';
}
</script>

<style lang="scss">
.search-box {
	padding: 20rpx;
	background-color: #e7e7e7;
	display: flex;
	gap: 20rpx;
	.search-box-l {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 0 20rpx;
		flex: 1;
		display: flex;
		align-items: center;
		gap: 10rpx;
		&.cancle {
			justify-content: center;
		}
		.box-l-search {
			display: flex;
			gap: 5rpx;
			align-items: center;
			.box-search-icon {
				background-image: url('./search.png');
				width: 40rpx;
				height: 40rpx;
				background-size: 100% 100%;
			}
		}
		.box-l-input {
			flex: 1;
		}
		.box-l-close {
			background-image: url('./close.png');
			width: 40rpx;
			height: 40rpx;
			background-size: 100% 100%;
		}
	}
	.search-box-r {
		color: orange;
	}
}
</style>